<template>
  <div class="com" v-if="info.isShowFooter">
    <div class="left" v-if="info.isShowFooter">{{info.title}}</div>
    <div  class="right">
        <img src="../assets/fd.png">
        <span @click="showUl = !showUl">+</span>
        <ul v-if="showUl">
          <li v-for="(item,index) in list" :key="index">{{item.title}}</li>
        </ul>
      </div> 
  </div>
</template>
<script>

export default {
    name:'common',
    data(){
        return{
           showUl:false,
            info:{
                isShowFooter:false,
                pic:'',
                title:''
            },
            list:[
              {title:'发起群聊',name:''},
              {title:'添加朋友',name:''},
              {title:'扫一扫',name:''},
              {title:'收付款',name:''},
            ]
        }
    },
    watch:{
        str(newVla,oldVal){//简单数据类型监听
            console.log('newVla',newVla)
            console.log('oldVal',oldVal)
        },
        "$route":{//监控路由元信息 只要发生变化就走到handler函数里面
            handler(newVla,oldVal){//监听普通的变量不需要用handler函数, 复杂函数监听  固定命名方法
                console.log('newVla',newVla)
                console.log('oldVal',oldVal)
                this.info = newVla.meta;
                // this.info = Object.assgin(this.info, newVla.meta);//如果每个路由里面都写死了false就不要设这个
            },
            deep:true,//是否深度监听如果监听的是对象就必须添加下面那条
            immediate:true//是否初次监听
        }
    },
    created(){
        console.log('===',this.$route)
        console.log('info=',this.info)
        console.log('info=',this.info)
    }
}
</script>
<style lang="scss" scoped>
.com{
    width:100%;
    height: 60px;
    background: rosybrown;
    display: flex;
    justify-content: space-around;
    position: relative;
    line-height: 60px;
    .left{
    width: 80%;
    height: 60px;
    text-align: center;
    display: inline-block;
    padding-left: 10%;
    }
    .right{
      width: 20%;
      height: 60px;
      display: flex;
      justify-content: space-around;
      img{
        width: 34px;
        height: 34px;
        margin-top: 16px;
      }
      span{
        font-size: 30px;
      }
      ul{
          position: absolute;
          width: 30%;
          height: 160px;
          top: 100%;
          right: 8px;
          text-align: center;
          list-style: none;
          box-shadow: 0 0 2px #b0aaaa;
        li{
          height: 40px;
          line-height: 40px;
        }
      }
    }
}

</style>